<template>
  <!--
  hook
  这个是vue2就开始有的，叫做钩子函数，用于监听组件的周期执行，当监听的周期钩子结束后，会执行它绑定的方法。类似于组件周期钩子的回调函数。
  常见用法：@hook:created="fn"   或者  v-on:hook:created="fn"。
  比如你用了一个组件，希望监听它初始化，挂载，或者销毁，在这些时期做一些事情，就可以用它。
   -->
  <div></div>
  <!--<Son v-on:hook:created="getSonCreated" @hook:mounted="getSonMounted"></Son>-->
</template>

<script>
  import Son from './Son'
  export default {
    name: "Index",

    components: { Son },
    created() {
      this.confrim()
    },
    methods: {
      getSonCreated() {console.log('这是index,触发了index的getSonCreated')},
      getSonMounted() {console.log('这是index,触发了index的getSonMounted')},
      post(p) {
        return new Promise((res, rej) => {
          console.log(22);
          res()
        }).then(res => {
          console.log(222);
          return `请求返回--------:${p}`
        })
      },
      // forEach循环
      // confrim(){
      //   console.log(1);
      //   let arr = ['p1', 'p2']; // 模拟多行数据
      //   arr.forEach(async item => {
      //     console.log(2);
      //     let res = await this.post(item);
      //     console.log('res------------:', res)
      //     console.log(3);
      //   });
      //   console.log(4);
      // },
      // for循环
      async confrim() {
        console.log(1);
        let arr =  ['p1', 'p2']; // 模拟多行数据
        for(let i =0,l=arr.length; i<l;i++) {
          console.log(2);
          let res = await this.post(arr[i]);
          console.log('res------------:', res)
          console.log(3);
        }
        console.log(4)
      }
    }
  }
</script>

<style scoped>

</style>
